<template>
    <a-modal v-model:visible="temp.visibleModal" :closable="false" :footer="false" modal-class="modal-danger">
        <a-carousel indicator-type="never" arrow-class="arrow-custom" :style="{
            width: '530px',
            height: '390px',
        }" @change="handleChange">
            <a-carousel-item v-for="(item, index) in (temp.modalList as any)" :key="index">
                <div class="modal-info">
                    <div class="close"><icon-close @click="handleCancel" /></div>
                    <div class="title">
                        <div class="img"><img src="@/assets/images/modal-wanzhou-danger.png" alt=""></div>
                        <div class="title-img">
                            <div>{{ $t('components.modal.63dtf4pc6dc0') }}</div>
                            <div>{{ $t('components.modal.63dtf4pc8040') }}</div>
                        </div>
                    </div>
                    <div class="info">
                        <div>
                            <div>{{ $t('components.modal.63dtf4pc8bo0') }}</div>
                            <div>{{ item.createTime ? dayjs.unix(item.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                            </div>
                        </div>
                        <div>
                            <div>{{ $t('components.modal.63dtf4pc8i80') }}</div>
                            <div>{{
                                Number(item.lng.toFixed(4)) }},{{
                                    Number(item.lat.toFixed(4)) }}</div>
                        </div>
                        <div>
                            <div>{{ $t('components.modal.63dtf4pc8nw0') }}</div>
                            <div>{{ useIdModelFormat(item.uavId).name }}</div>
                        </div>
                        <div>
                            <div>{{ $t('components.modal.63dtf4pc8ts0') }}</div>
                            <div>{{ item?.whiteUav?.uavNum ? item?.whiteUav?.uavNum :
                                $t('components.intradayData.63cwnibmq240') }}</div>
                        </div>
                        <div>
                            <div>{{ $t('components.modal.63dtf4pc8zs0') }}</div>
                            <div>{{ item?.whiteUav?.customerName ? item?.whiteUav?.customerName :
                                $t('components.intradayData.63cwnibmq500') }}</div>
                        </div>
                    </div>
                    <div class="botton" @click="handleDel(index)">{{ $t('components.modal.63dtf4pc9ac0') }}</div>
                </div>
            </a-carousel-item>
        </a-carousel>
    </a-modal>
</template>
<script lang='ts' setup>
import { useIdModelFormat } from "@/hooks/comparison";
import dayjs from 'dayjs'
const temp = useTemp()
console.log('temp.modalList', temp.modalList)

// 轮播
const handleChange = (value: any) => {
    console.log(value)
}
// const showModal = () => {
//     // let arr = [16,18,12,13,14,15]
//     // if ((status === 3 && arr.includes(id)) || arr.includes(id)) return;
//     // if (suffix === "个人" && state) return;
//     // if (suffix === '单位' && state && (stratTime<=time&&endTime>=time)) return;
//     // if (suffix === "警用") return;
//     temp.visibleModal = true;
// }
const handleCancel = () => {
    temp.visibleModal = false;
}
const handleDel = (index: any) => {
    temp.modalList.splice(index, 1)
    temp.visibleModal = false;
};
// const form = reactive({
//     data: {
//         status: 0,
//         uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
//     },
//     loading: false,
//     list: [] as any,
//     count: 0
// })
// onMounted(() => {
//     showModal()
//     temp.getModalData()
// })
</script>
<style scoped lang="less">
.modal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 450px;
    height: 400px;
    margin-left: 40px;
    color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('@/assets/images/modal-wanzhou-dangerBg.png');

    .close {
        width: 100%;
        display: flex;
        justify-content: end;
        margin-top: 35px;
        margin-right: 115px;
    }

    .title {
        display: flex;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;

        >.img {
            img {
                width: 36px;
                height: 38px;
            }
        }

        >.title-info {
            margin-bottom: 10px;
        }
    }

    .info {
        display: flex;
        flex-direction: column;

        >div {
            display: flex;
            justify-content: center;
        }
    }

    .botton {
        width: 140px;
        height: 40px;
        opacity: 1;
        border-radius: 4px;
        background: rgba(255, 31, 31, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2px 8px 2px 8px;
        font-size: 16px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 30px;
    }
}

:deep(.arrow-custom) {
    >div {
        border-radius: 0;
        background-color: unset !important;

        svg {
            display: none;
        }
    }

    .arco-carousel-arrow-left {
        width: 42px;
        height: 42px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('@/assets/images/modal-wanzhou-arrowLeft.png');
    }

    .arco-carousel-arrow-right {
        width: 42px;
        height: 42px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('@/assets/images/modal-wanzhou-arrowRight.png');
    }
}
</style>